<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <el-button
          type="primary"
          icon="ele-Plus"
          @click="emit('changeShowIndex', 2)"
          :disabled="!category3Id"
          >添加SPU</el-button
        >
      </template>
      <!-- card body -->
      <el-table :data="spuList" border stripe>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="emit('changeShowIndex', 3, row)"
              icon="ele-Plus"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              @click="emit('changeShowIndex', 2, row)"
              icon="ele-Edit"
            ></el-button>
            <el-button
              type="info"
              size="small"
              @click="showSkuInfo(row.id)"
              icon="ele-InfoFilled"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              @click="deleteSpu(row.id)"
              icon="ele-Delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[3, 5, 7, 9]"
        v-model:pageSize="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        :style="{ margin: '25px' }"
      >
      </el-pagination>
      <el-dialog v-model="dialogTableVisible" title="SKU列表">
        <el-table :data="skuList">
          <el-table-column label="名称" prop="skuName" />
          <el-table-column label="价格" prop="price" />
          <el-table-column label="重量" prop="weight" />
          <el-table-column label="默认图片">
            <template v-slot="{ row }">
              <img :src="row.skuDefaultImg" alt="" width="100" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"

  export default defineComponent({
    name: "SpuList",
  })
</script>

<script setup lang="ts">
  import { ref, watch, onMounted } from "vue"
  import { storeToRefs } from "pinia"
  import useCategoryListState from "@/stores/category"
  import { reqSpuList, reqDeleteSpu } from "@/api/spu"
  import type { spuInfoListType, spuInfoItemType } from "@/api/spu"
  import { reqSkuInfoBySpuId } from "@/api/sku"
  import type { skuInfoListType } from "@/api/sku"
  import { ElMessage } from "element-plus"
  //页码的各项数据
  const currentPage = ref(1) //当前页
  const pageSize = ref(3) //每页数量
  const totalNum = ref(0) //总数量

  //获取categoryStore数据对象
  const categoryStore = useCategoryListState()

  //得到category中的category3Id
  const { category3Id } = storeToRefs(categoryStore)

  //定义spu列表的数据
  const spuList = ref<spuInfoListType>([])

  //定义一个数据 代表当前是否展示skuInfo的弹窗
  const dialogTableVisible = ref(false)

  //定义一个初始化数据，保存请求回来的sku列表
  const skuList = ref<skuInfoListType>([])

  //点击查看某个spu的sku列表的事件回调函数
  const showSkuInfo = async (spuId: number) => {
    //打开弹窗
    dialogTableVisible.value = true
    //发起请求
    const result = await reqSkuInfoBySpuId(spuId)
    //赋值操作
    // console.log(result)
    skuList.value = result
  }

  //封装一个请求分页列表数据的函数
  const getSpuList = async () => {
    //发送请求
    const res = await reqSpuList(
      currentPage.value,
      pageSize.value,
      category3Id.value as number
    )
    //赋值操作
    spuList.value = res.records
    totalNum.value = res.total
  }

  //监听到category3Id的改变才能发送初始化列表数据
  watch(category3Id, (newVal) => {
    //如果category3Id的值为空,则要先清空数据
    if (!newVal) {
      spuList.value = []
      return
    }
    //获取最新spu列表数据
    getSpuList()
  })
  //使用watch监听页码和每页数量的改变,重新发送请求获取最新数据
  watch([currentPage, pageSize], getSpuList)

  //接收父组件传递的切换组件的自定义事件
  const emit = defineEmits<{
    (event: "changeShowIndex", index: number, row?: spuInfoItemType): void
  }>()

  //初始化发送请求
  onMounted(() => {
    if (category3Id) {
      getSpuList()
    }
  })

  //点击删除spu按钮的事件回调函数
  const deleteSpu = async (spuId: number) => {
    //发送删除请求
    await reqDeleteSpu(spuId)
    //提示信息
    ElMessage.success("删除Spu成功！")
    //获取最新spu列表数据
    getSpuList()
  }
</script>

<style scoped lang="scss"></style>
